﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Ditto.Models.User>" %>
  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/Scripts/fancybox/jquery.easing-1.3.pack.js"></script>
<link rel="stylesheet" href="/Scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


<div>
    <% if (!String.IsNullOrEmpty(Model.UserPicture1))
       { %>
            <a id="single_image" href="/Content/<%= Model.UserPicture1 %>.jpg"><img class="item" alt="<%= Model.UserID %>" src="/Content/<%= Model.UserPicture1 %>-small.jpg" /></a>

            <% if (Model.Is(Context.User.Identity.Name))
               { %>

                    <div style="margin-top:3">
                        <%: Html.ActionLink("Remove Photo", "DeletePhoto", new { id = Model.UserID })%>   
                    </div>
            <% } %>
    <% }
       else
       { %>

    <% if (Model.Is(Context.User.Identity.Name))
       { %>

       <% using (Html.BeginForm("AddPhoto", "Users", new { id = Model.UserID }, FormMethod.Post, new { enctype = "multipart/form-data" }))
          { %>
            Upload image: <input type="file" name="file"/>

            <div style="margin-top:7">
                        <input type="submit" value="Save" class="button"/>
                    </div>
        <%} %>
    <% }
       else
       {%>
       <p style="text-align:center;vertical-align:middle">
       No Image Available
       </p>
    <%} %>
    <%} %>

</div>

<script type="text/javascript">
    $(document).ready(function () {

        /* This is basic - uses default settings */

        $("a#single_image").fancybox();

        /* Using custom settings */

        $("a#inline").fancybox({
            'hideOnContentClick': true
        });

        /* Apply fancybox to multiple items */

        $("a.group").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'overlayShow': false
        });

    });

</script>